<template>
  <div class="login-container">
    <div class="login-mask">
      <div class="login-box">
        <h3 class="system-name">都江堰语音合成系统</h3>
        <div class="login-div">
          <input type="text" placeholder="请输入账号" v-model="username" @blur="checkedUsername"/>
          <input type="password" placeholder="请输入密码" v-model="password" @blur="checkedPassword"/>
          <input type="button" value="登录" @click="login"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  @import '../../assets/less/login';
</style>

<script>
import api from '@/assets/fetch/api'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      if (this.username === '' || this.password === '') {
        this.$message({
          message: '账号密码不能为空',
          type: 'warning'
        })
        return
      }
      api.login({name: this.username}).then(res => {
        if (res.success) {
          sessionStorage.setItem('userId', res.userId)
          if (this.$route.query.redirect) { // 登录成功后跳转到指定路由
            this.$router.push(this.$route.query.redirect)
          } else {
            this.$router.push('/home')
          }
        }
      })
    },
    checkedUsername (e) {
      if (this.username === '') {
        e.target.style.borderBottomColor = 'red'
      } else {
        e.target.style.borderBottomColor = '#D2A8FD'
      }
    },
    checkedPassword (e) {
      if (this.password === '') {
        e.target.style.borderBottomColor = 'red'
      } else {
        e.target.style.borderBottomColor = '#D2A8FD'
      }
    }
  }
}
</script>
